<script>
export default {
  data(){
    return{
      age: 19,
      sex: 'man',
      isShow: true
    }
  }
}
  
</script>

<template>
  <div>
    <!-- v-if -->
    <p v-if="age>18">成年人</p>
      <p v-else-if="age==18">正好18</p>
    <p v-else>小朋友</p>
    <!-- <p v-if="age<18">小朋友</p> -->
    <template v-if="age > 18">
      <p>你好</p>
      <p>你好</p>
      <p>你好</p>
      <p>你好</p>
    </template>

    <!-- v-show -->
    <p v-show="sex == 'man'">男生</p>
    <p v-show="sex == 'woman'">女生</p>

    <!-- v-show 只是简单地切换元素的 display CSS property。带有 v-show 的元素始终会被渲染并保留在 DOM 中。 -->
    <!-- v-if为false时，对应的元素及其子元素都不会被渲染，控制DOM元素的创建和销毁。 -->
    <h2 v-if="isShow">v-if</h2>
    <h2 v-show="!isShow">v-show</h2>
    <button @click="isShow=!isShow">改变</button>
  </div>
</template>

<style> 

</style>
